<template>
  <div class="tese">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>特色资源</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >浏览更多</el-button
        >
      </div>
      <div class="img">
        <ul v-for="(item, index) in lists" :key="index">
            <span>{{item.name}}</span>
          <li>
            <router-link :to="'/tese/'+item.id">
              <img :src='item.path' alt="" />
            </router-link>
            </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props:['id'],
  data() {
    return {
        lists:[
            {id:1,name:'校园历史',path:require('../assets/tese1.jpg')},
            {id:2,name:'山西文化',path:require('../assets/tese2.jpg')},
            {id:3,name:'校园文化',path:require('../assets/tese3.jpg')},
            {id:4,name:'名人藏书',path:require('../assets/tese4.jpg')},
        ]
    };
  },
};
</script>

<style >
.tese {
  width: 1200px;
  margin: 0 auto;
  
}
 .tese .el-card__body{
  padding: 0;
   margin: 0;
 }

.tese .box-card .img img ul{
    margin: 0;
    padding: 0;
}

.tese .box-card .img span {
  position: relative;
  top: 220px;
  left: 59px;
  color: #fff;
  font-size: 30px;
   z-index: 2;
}
.tese .img {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    margin-top: -20px;
    z-index: 1;
}
.tese  .img img{
    width: 260px;
    height: 260px; 
    margin-left: -18px;  
}
.tese  .img ul li:hover img{
  transform: scale(1.1);
    transition: all 0.6s;
}
</style>